<template>
	<view v-if="supplierlist && suppliers" @click="toSupplierShop" class="shop-name detail-nav-bar">
		<view class="left">
			<image :src="suppliers.litpic" v-if="suppliers.litpic" mode="aspectFill"></image>
			<view class="name">{{suppliers.suppliername}}</view>
			<view class="brand-icon"></view>
		</view>
		<view class="right">进店逛逛<text class="icon-right iconfont">&#xe67f;</text></view>
	</view>
</template>

<script>
	/**
	 * 供应商店铺
	 */
	export default {
		name: 'stSupplierShop',
		props: {
			supplierlist: {
				type: [Boolean,String],
				default: false
			},
			suppliers: {
				type: [Boolean,Object],
				default: false
			}
		},
		data() {
			return {

			};
		},
		methods:{
			// 前往供应商店铺
			toSupplierShop(){
				uni.navigateTo({
					url:`/subPackages/shop/shop?supplierid=${this.suppliers.id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail-nav-bar {
		@extend .justifyspacec;
		border: 1px solid #fff;
		border-radius: 20rpx;
		background: linear-gradient(207deg, #e4f9ea 0%, #fff 100%);
		.icon-right {
			margin-left: 7rpx;
			font-size: 24rpx;
		}

		.left {
			@extend .alignJustify;
		}

		.right {
			@extend .alignItems;
			font-size: $uni-font-size-mini;
		}
	}

	.shop-name {
		height: 90rpx;
		padding: 0 25rpx;
		margin-bottom: $uni-spacing-col-md;
		background-color: $uni-bg-color;

		image {
			width: 60rpx;
			height: 60rpx;
			margin-right: 19rpx;
			border-radius: 18rpx;
		}

		.name {
			@extend .ellipse;
			max-width: 420rpx;
			font-size: $uni-font-size-base;
		}

		.brand-icon {
			width: 25rpx;
			height: 28rpx;
			margin-left: 11rpx;
			background: url("https://static.member.stourweb.cn/uniapp/static/images/brand-icon.png") no-repeat;
			background-size: contain;
		}

		.right {
			color: #666;
		}
	}
</style>
